<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :isLoading="isLoading"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <!-- 商品信息 -->
    <a-card class="mt-20" :bordered="false">
        <a-table
          :locale="{emptyText: '暂无数据'}"
          :columns="columns"
          :dataSource="expressList"
          :pagination="false"
		  :scroll="{x: true}"
        >
          <div slot="context" slot-scope="item">
			  <div v-html="setName(item.context,1)"></div>
			  <div v-html="setName(item.time,2)"></div>
		  </div>
        </a-table>
    </a-card>
  </a-modal>
</template>

<script>
import * as Api from '@/api/order/event'

const columns = [
  {
    title: '信息',
    scopedSlots: { customRender: 'context' },
    width: '100%',
	key: '1'
  }
]
export default {
  data () {
    return {
      // 对话框标题
      title: '物流信息',
      // 标签布局属性
      labelCol: { span: 6 },
      // 输入框布局属性
      wrapperCol: { span: 13 },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      isLoading: false,
      columns,
      // 物流公司列表
      expressList: [],
      // 当前记录
      record: {},
    }
  },
  methods: {
    // 显示对话框
    show (record) {
      // 显示窗口
      this.visible = true
      // 当前记录
      this.record = record
	  this.getDetail(this.record.order_id)
    },
	// 获取当前记录
	getDetail (orderId) {
	  this.isLoading = true
	  Api.express({ orderId: orderId})
	    .then(response => {
	      this.expressList = response.data.list[0].traces
	    }).finally(() => {
	    this.isLoading = false
	  })
	},
	setName(e,type) { //文字超出显示省略号
		var text = '信息：';
		if(type == 2){
			text = '时间：';
		}
		return '<span  title="' +text+ e + '" style="display:inline-block;width: 100%;' +
			'        overflow : hidden;' +
			'        text-overflow: ellipsis;' +
			'        white-space: nowrap;">' +text+ e + '</span>'
	},

    // 关闭对话框事件
    handleCancel () {
      this.visible = false
      // this.$refs.ruleForm.resetFields()
    },

  }
}
</script>
<style lang="less" scoped>
/deep/.ant-modal-header {
  border-bottom: none;
}
/deep/.ant-modal-footer {
  border-top: none;
}
/deep/.ant-modal-body {
  padding: 0px 24px;
}
/deep/.ant-tabs-bar {
  margin-bottom: 22px;
}
.ant-table-wrapper {
  margin-bottom: 40px;
}
</style>